<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="data:;base64,=">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试立方体</title>
  <style>
    *{
      margin:0 auto;
      padding:0;
    }
    body{
      background:rgb(196,196,198);
    }
    #main{
       position:relative;
       width:800px;
       height:800px;
       margin-top:200px;
       background: linear-gradient(skyblue,khaki);
       border:1px solid red;
    }
    /* 立方体 和 圆柱体的 地基,默认以物体中心为基础建构  ,z轴位置需要 计算设置 ,置于物体中西那位置 */
    .cc_base{
      width:100px;
      height:100px;
      transform-origin:50% 50%;
      transform-style: preserve-3d;
    }
    .cc_base *{
      transform-style: preserve-3d;/* 以3D空间方式呈现 , 默认2d平面(怎么看都是扁的) */
    }
    .cc_face{
      position:absolute;
      top:0;
      left:0;
      background:rgb(110,129,254);
      background-size:100% 100%;
      border:1px solid red;
      /* transform-style: preserve-3d; 以3D空间方式呈现 , 默认2d平面(怎么看都是扁的) */
    }
    /* 整个箭头 容器  */
    .cc_arrow{
      position:absolute;
      width:100%;
      height:100%;
    }
    /* 轴指示箭头 x轴 */
    .cc_arrow_x{
      position:absolute;
      width:140px;
      height:20px;
      top:50%;
      left:50%;
      margin-top:-10px;
      background:url(./img/2.png);
      background-repeat:no-repeat;
      background-size:60px 20px;
      background-position:100% 0%;
      transform:rotate(0deg) rotateX(0deg) rotateY(0deg)  rotateZ(0deg);
    }
    .cc_arrow_x *{
      width:100%;
      height:100%;
      background:url(./img/2.png);
      background-repeat:no-repeat;
      background-size:60px 20px;
      background-position:100% 0%;
      transform:rotateX(90deg) rotateY(0deg)  rotateZ(0deg);
    }
    /* 轴指示箭头 y轴 */
    .cc_arrow_y{
      position:absolute;
      width:20px;
      height:140px;
      left:50%;
      top:50%;
      margin-left:-10px;
      background:url(./img/3.png);
      background-repeat:no-repeat;
      background-size:20px 60px;
      background-position:0% 100%;
      transform:rotate(0deg) rotateX(0deg) rotateY(0deg)  rotateZ(0deg);
    }
    .cc_arrow_y *{
      width:100%;
      height:100%;
      background:url(./img/3.png);
      background-repeat:no-repeat;
      background-size:20px 60px;
      background-position:0% 100%;
      transform:rotateX(0deg) rotateY(90deg)  rotateZ(0deg);
    }
    .cc_arrow_z{
        position:absolute;
        transform-origin:0% 0%;
        width:20px;
        height:140px;
        left:50%;
        margin-left:-10px;
        top:50%;
        /* margin-top:-10px; */
        background:url(./img/4.png);
        background-repeat:no-repeat;
        background-size:20px 60px;
        background-position:0% 100%;
        transform:rotate(0deg) rotateX(90deg) rotateY(0deg)  rotateZ(0deg);
    }
    .cc_arrow_z *{
        width:100%;
        height:100%;
        background:url(./img/4.png);
        background-repeat:no-repeat;
        background-size:20px 60px;
        background-position:0% 100%;
        transform:rotateX(0deg) rotateY(90deg)  rotateZ(0deg);
    }
    .cc_face:hover{
      background:rgb(250,119,102);
    }
    .cc_child0:hover{
        background:rgb(243,208,84);
    }
    .cc_child1:hover{
        background:rgb(131,253,39);
    }
  </style>
</head>
<body>
  <!-- 
    transform-origin: x, y;  //x轴 和 y轴位置 (绕轴旋转依据 , 交叉位置为 旋转依据) 默认(50% 50%)  n/%/left..  
    transform:matrix(1,0,0,1,0,0) rotate(0deg) rotateX(0deg) rotateY(0deg) //  默认全
    matrix(1,0,0,1,0,0)    //默认 无变化
    matrix( 0:a, 1:b, 2:c, 3:d, 4:e, 5:f);
    0:a 水平缩放  (默认1倍)
    1:b 水平倾斜  (默认0)
    2:c 垂直倾斜  (默认0)
    3:d 垂直缩放  (默认1倍)
    4:e 水平移动  (值)
    5:f 垂直移动  (值)

    translate3d(x,y,z); //x,y,z三个方向上移动
    rotateX(0deg) rotateY(0deg)  rotateZ(0deg)
   -->
  <div id='main'> 
      
   <!--  
     <div class="cc_base" style="width: 80px;height: 80px;transform-origin: 50% 50%;transform: translate3d(0px, 0px, 0px) rotateX(41deg) rotateY(0deg) rotateZ(28deg);">
        <div class="arrow">
            <div class="arrow_x"><div></div></div>
            <div class="arrow_y"><div></div></div>
            <div class="arrow_z"><div></div></div>
        </div>
        <div class="face" style="width: 80px; height: 80px; transform-origin: 50% 50%; transform: translate3d(0px, 0px, -60px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);">底部</div>
        <div class="face" style="width: 120px; height: 80px; transform-origin: 0% 50%; transform: translate3d(0px, 0px, -60px) rotateX(0deg) rotateY(-90deg) rotateZ(0deg);">侧1(左折)</div>
        <div class="face" style="width: 120px; height: 80px; transform-origin: 100% 50%; transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);">侧2(右折)</div>
        <div class="face" style="width: 80px; height: 120px; transform-origin: 50% 0%; transform: translate3d(0px, 0px, -60px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);">侧3(上折)</div>
        <div class="face" style="width: 80px; height: 120px; transform-origin: 50% 100%; transform: translate3d(0px, 0px, -60px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);">侧4(下折)</div>
        <div class="face" style="width: 80px; height: 80px; transform-origin: 50% 50%; transform: translate3d(0px, 0px, 60px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);">顶部</div>
    </div> 
  -->


  </div>
  
</body>
</html>
<script>
 /*  <div class="base" style="transform:rotate(0deg) rotateX(0deg) rotateY(0deg)  rotateZ(0deg);" >
            <div class="arrow_x"></div> //箭头x轴
            <div class="arrow_y"></div> //箭头y轴
            <div class="arrow_z"></div> //箭头z轴 
          <!-- 以下 6面 基于bass 底座 上下底部 正负半个侧面高度, 4个侧面负半个高度 -->
            <div class="face" style="transform:translate3d(0,0,-50px) rotate(0deg) rotateX(0deg) rotateY(0deg);">底部</div>
            <div class="face" style="transform-origin:0% 50%; transform:translate3d(0,0,-50px)  rotate(0deg) rotateX(0deg) rotateY(-90deg);">侧1(左折)</div>
            <div class="face" style="transform-origin:100% 50%; transform:translate3d(0,0,-50px)  rotate(0deg) rotateX(0deg) rotateY(90deg);">侧2(右折)</div>
            <div class="face" style="transform-origin:50% 0%; transform:translate3d(0,0,-50px)  rotate(0deg) rotateX(90deg) rotateY(0deg);">侧3(上折)</div>
            <div class="face" style="transform-origin:50% 100%; transform:translate3d(0,0,-50px)  rotate(0deg) rotateX(-90deg) rotateY(0deg);">侧4(下折)</div>
            <div class="face" style="transform:translate3d(0,0,50px)">顶部</div> 

    </div> */
</script>
<script src="./js/eng_1.2.2_min.js"></script>
<script src="./js/css_city_entity.js"></script>
<script>
/* 
var cubeTemplate=
"<div class='base' style='transform:translate3d(0,0,0) rotateX(40deg) rotateY(0deg)  rotateZ(26deg);>"+  
      "<div class='arrow'>"+
        "<div class='arrow_x'><div></div></div>"+
        "<div class='arrow_y'><div></div> </div>"+
        "<div class='arrow_z'><div></div></div>"+
      "</div>"+  
      "<div class='face' e-id='side0' style='transform:translate3d(0,0,-50px)  rotateX(0deg) rotateY(0deg) rotateZ(0deg);'>底部</div>"+
      "<div class='face' e-id='side2' style='transform-origin:0% 50%; transform:translate3d(0,0,-50px)  rotate(0deg) rotateX(0deg) rotateY(-90deg);'>侧1(左折)</div>"+
      "<div class='face' e-id='side3' style='transform-origin:100% 50%; transform:translate3d(0,0,-50px)  rotate(0deg) rotateX(0deg) rotateY(90deg);'>侧2(右折)</div>"+
      "<div class='face' e-id='side4' style='transform-origin:50% 0%; transform:translate3d(0,0,-50px)  rotate(0deg) rotateX(90deg) rotateY(0deg);'>侧3(上折)</div>"+
      "<div class='face' e-id='side5' style='transform-origin:50% 100%; transform:translate3d(0,0,-50px)  rotate(0deg) rotateX(-90deg) rotateY(0deg);'>侧4(下折)</div>"+
      "<div class='face' e-id='side1' style='transform:translate3d(0,0,50px)'>顶部</div>"+
"</div>"

*/





</script>
